@()(implicit request: RequestHeader)
	@main("共线性分析(变异检测)")("mummer") {

		<style>

				.myH4 {
					font-size: 17px;
				}

				.myH5 {
					font-size: 15px;
					margin-top: 20px;
				}

		</style>

		<div class="page-content">

			<div class="page-bar">
				<ul class="page-breadcrumb">
					<li>
						<i class="fa fa "></i>
						<a href="">共线性分析(变异检测)</a>
					</li>
				</ul>
			</div>


			<div class="row-fluid">
				<div class="row">
					<div class="col-md-12 col-sm-12">
						<div class="portlet blue-madison box">
							<div class="portlet-title">
								<div class="caption">
									共线性分析(变异检测)
								</div>
							</div>

							<div class="portlet-body">

								<form class="registration-form form-horizontal" id="form"
								accept-charset="UTF-8" method="post">

									<div class="form-group">
										<label class="control-label col-sm-2">任务名:</label>
										<div class="col-sm-3">
											<input class="form-control" name="missionName" onfocus="inputSelect(this)">
											<span class="help-block"><a href="@routes.ToolController.downloadExampleFile()?fileName=mummer_example.zip"><em id="egQuery">
												example file</em></a></span>
										</div>

									</div>

									<div class="form-group">
										<label class="control-label col-sm-2">Query(查询样本)文件（*.fa,*.fasta）:</label>
										<div class="col-sm-8">
											<input id="input-1" type="file" class="file" name="querySampleFile" data-show-preview="false"
											data-show-upload="false" accept=".fa,.fasta">
										</div>
									</div>

									<div class="form-group">
										<label class="control-label col-sm-2">Target(目标样本)文件（*.fa,*.fasta）:</label>
										<div class="col-sm-8">
											<input id="input-1" type="file" class="file" name="refSampleFile" data-show-preview="false"
											data-show-upload="false" accept=".fa,.fasta">
										</div>
									</div>

									<div class="form-group">
										<div class="actions col-sm-offset-2 col-sm-2">
											<button type="button" class="btn btn-primary" style="width: 90%;" id="search" onclick="Mummer.myRun">
												运行</button>
										</div>

									</div>

								</form>


							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="row-fluid">
				<div class="row">
					<div class="col-md-12 col-sm-12">
						<div class="portlet blue-madison box">
							<div class="portlet-title">
								<div class="caption">
									分析结果
								</div>
							</div>

							<div class="portlet-body">

								<div class="table-responsive">

									<table class="display table table-bordered" id="missionTable" data-pagination="true" data-search="true"
									data-toolbar="#toolbar" data-page-list="[5, 10, all]" data-page-size="5" data-multiple-search="true">
										<thead>
											<tr>
												<th data-field="missionName" data-sortable="true">任务名</th>
												<th data-field="args" data-sortable="true" data-formatter="genome.argsFmt">
													参数</th>
												<th data-field="state" data-sortable="true"
												data-formatter="Genome.stateFmt"
												>状态</th>
												<th data-field="startTime" data-sortable="true">开始时间</th>
												<th data-field="endTime" data-sortable="true">结束时间</th>
												<th data-field="operate" data-formatter="genome.operateFmt">操作</th>
											</tr>
										</thead>
									</table>

								</div>


							</div>
						</div>
					</div>
				</div>

			</div>

			<div class="row-fluid" id="result" style="display: none">
				<div class="row">
					<div class="col-md-12 col-sm-12">
						<div class="portlet blue-madison box">
							<div class="portlet-title">
								<div class="caption" id="missionResult">
									共线性分析-变异检测结果展示(<span id="missionName"></span>)
								</div>
							</div>

							<div class="portlet-body">

								<h4 style="margin-top: 20px" class="myH4">1. 共线性分析结果:</h4>

								<h5 class="myH5">1.1 Cover data(覆盖度统计)
									<a target="_blank" class="fa fa-question-circle" href="@routes.GenomeController.toMummerHelp()#cover" title="格式说明"></a>
									：</h5>
									<div class="table-responsive" id="tableContent">
									<table class="display table table-bordered" id="table" data-pagination="true" data-search="true"
									data-toolbar="#toolbar" data-page-list="[10, 25, 50, 100, all]" data-multiple-search="true"
									data-show-export="true" data-export-types="['excel','txt']" data-export-data-type="all"
									>
									<thead>
									<th data-field='geneId' data-sortable='true' id="marker">
									Target_alligned(bp)</th>
									</thead>
									</table>
									</div>
									<h5 class="myH5">1.2 共线性分析结果文件列表：</h5>
									<div class="table-responsive" id="tableContent">
									<table class="display fileTable table table-bordered" id="fileTable" data-pagination="true"
									data-toolbar="#toolbar" data-page-list="[10, 25, 50, 100, all]"
									>
									<thead>
									<th data-sortable='true' >文件</th>
									<th data-sortable='true' >说明</th>
									<th data-sortable='true' >下载</th>
									</thead>
									<tbody>
									<tr>
									<td>alg.txt
									</td>
									<td>全基因组比对中，比对块的位点信息，格式说明见：
									<a target="_blank" class="fa fa-question-circle" href=" @routes.GenomeController.toMummerHelp() #alg" title="格式说明"></a>
									</td>
									<td>
									<a href="javascript:downloadFile('alg.txt')" style='cursor: pointer;'><span><em class='fa fa-download'></em></span></a>
									</td>
									</tr>
									<tr>
									<td>axt.txt
									</td>
									<td>描述序列比对的具体情况，格式说明见：
									<a target="_blank" class="fa fa-question-circle" href="@routes.GenomeController.toMummerHelp()#axt" title="格式说明"></a>
									</td>
									<td><a href="javascript:downloadFile('axt.txt')" style='cursor: pointer;'><span><em class='fa fa-download'></em></span></a></td>
									</tr>
									<tr>
									<td>identity_list.txt
									</td>
									<td>比对块的位点信息，比对类型及相似度情况，格式说明见：
									<a target="_blank" class="fa fa-question-circle" href="@routes.GenomeController.toMummerHelp()#identity" title="格式说明"></a>
									</td>
									<td><a href="javascript:downloadFile('identity_list.txt')" style='cursor: pointer;'><span><em class='fa fa-download'></em></span></a></td>
									</tr>
									<tr>
									<td>query.miss.txt</td>
									<td>Query(查询样本)中，没有比对上的序列信息，第一列为序列名，第二列为序列长度。</td>
									<td><a href="javascript:downloadFile('query.miss.txt')" style='cursor: pointer;'><span><em class='fa fa-download'></em></span></a></td>
									</tr>
									<tr>
									<td>target.miss.txt</td>
									<td>Target(目标样本)中，没有比对上的序列信息，第一列为序列名，第二列为序列长度。</td>
									<td><a href="javascript:downloadFile('target.miss.txt')" style='cursor: pointer;'><span><em class='fa fa-download'></em></span></a></td>
									</tr>
									</tbody>
									</table>
									</div>
									<h5 class="myH5">1.3 全基因组平行共线性图：</h5>
									<div id="download" style="margin-top: 10px">
									<input type="hidden" id="pdfBase64">
									下载SVG格式图片:
									<a href="javascript:downloadFile('Target-Query.parallel.svg')" style='cursor: pointer;'><span><em class='fa fa-download'></em></span></a>
									</div>
									<div id="charts">
									<div><img src='' style='width: 60%' id="image1"></img>
									</div>
									<h5 class="myH5">1.4 全基因组二维共线性图：</h5>
									<div id="download">
									<input type="hidden" id="pdfBase64">
									下载SVG格式图片:
									<a href="javascript:downloadFile('Target-Query.xoy.svg')" style='cursor: pointer;'><span><em class='fa fa-download'></em></span></a>
									</div>
									<div id="charts1">
									<div>没有图片结果生成！</div>
									</div>
									<h4 style="margin-top: 20px" class="myH4">2. 变异检测分析结果:</h4>
									<h5 class="myH5">2.1 变异检测分析结果列表：</h5>
									<div class="table-responsive" id="tableContent">
									<table class="display fileTable table table-bordered" id="fileTable2" data-pagination="true"
									data-toolbar="#toolbar" data-page-list="[10, 25, 50, 100, all]"
									>
									<thead>
									<th data-sortable='true' >文件</th>
									<th data-sortable='true' >说明</th>
									<th data-sortable='true' >下载</th>
									</thead>
									<tbody>
									<tr>
									<td>snp.txt
									</td>
									<td>SNP检测结果，格式说明见：
									<a target="_blank" class="fa fa-question-circle" href="@routes.GenomeController.toMummerHelp()#snp" title="格式说明"></a>
									</td>
									<td><a href="javascript:downloadFile('snp.txt')" style='cursor: pointer;'><span><em class='fa fa-download'></em></span></a></td>
									</tr>
									<tr>
									<td>indel.txt
									</td>
									<td>InDel检测结果，格式说明见：
									<a target="_blank" class="fa fa-question-circle" href="@routes.GenomeController.toMummerHelp()#indel" title="格式说明"></a>
									</td>
									<td><a href="javascript:downloadFile('indel.txt')" style='cursor: pointer;'><span><em class='fa fa-download'></em></span></a></td>
									</tr>
									<tr>
									<td>sv.txt
									</td>
									<td>SV检测结果，格式说明见：
									<a target="_blank" class="fa fa-question-circle" href="@routes.GenomeController.toMummerHelp()#sv" title="格式说明"></a>
									</td>
									<td><a href="javascript:downloadFile('sv.txt')" style='cursor: pointer;'><span><em class='fa fa-download'></em></span></a></td>
									</tr>
									</tbody>
									</table>
									</div>
									<h5 class="myH5">2.2 基因组上的SNP、InDel密度分布图：</h5>
									<div id="download">
									<input type="hidden" id="pdfBase64">
									下载SVG格式图片:
									<a href="javascript:downloadFile('final.snp_indel.dis.svg')" style='cursor: pointer;'><span><em class='fa fa-download'></em></span></a>
									</div>
									<div id="charts3">
									<div>
									<img src='' style='width: 60%' id="image3">
									</div>
									</div>
									<h5 class="myH5">2.3 全基因组结构变异圈图：</h5>
									<div id="download">
									<input type="hidden" id="pdfBase64">
									下载SVG格式图片:
									<a href="javascript:downloadFile('SV_cycle.svg')" style='cursor: pointer;'><span><em class='fa fa-download'></em></span></a>
									</div>
									<div id="charts4">
									<div>
									<img src='' style='width: 60%' id="image4">
									</div>
									</div>
									<h4 style="margin-top: 20px" class="myH4">3. 注释结果:</h4>
									<h5 class="myH5">3.1 SNP注释结果列表：</h5>
									<div class="table-responsive" id="tableContent">
									<table class="display fileTable table table-bordered" id="fileTable2" data-pagination="true"
									data-toolbar="#toolbar" data-page-list="[10, 25, 50, 100, all]"
									>
									<thead>
									<th data-sortable='true' >文件</th>
									<th data-sortable='true' >说明</th>
									<th data-sortable='true' >下载</th>
									</thead>
									<tbody>
									<tr>
									<td>snp.cds.stat.xls
									</td>
									<td>CDS区域SNP注释的统计列表，格式说明见：
									<a target="_blank" class="fa fa-question-circle" href="@routes.GenomeController.toMummerHelp()#cdsStat" title="格式说明"></a>
									</td>
									<td><a href="javascript:downloadFile('snp.cds.stat.xls')" style='cursor: pointer;'><span><em class='fa fa-download'></em></span></a></td>
									</tr>
									<tr>
									<td>snp.chr.stat.xls
									</td>
									<td>参考序列上每条染色体的SNP注释统计列表，格式说明见：
									<a target="_blank" class="fa fa-question-circle" href="@routes.GenomeController.toMummerHelp()#chrStat" title="格式说明"></a>
									</td>
									<td><a href="javascript:downloadFile('snp.chr.stat.xls')" style='cursor: pointer;'><span><em class='fa fa-download'></em></span></a></td>
									</tr>
									<tr>
									<td>snp.cds.info.xls
									</td>
									<td>位于基因区SNP 注释文件，格式说明见：
									<a target="_blank" class="fa fa-question-circle" href="@routes.GenomeController.toMummerHelp()#cdsInfo" title="格式说明"></a>
									</td>
									<td><a href="javascript:downloadFile('snp.cds.info.xls')" style='cursor: pointer;'><span><em class='fa fa-download'></em></span></a></td>
									</tr>
									<tr>
									<td>snp.intergenic.info.xls
									</td>
									<td>位于基因间区的SNP 注释文件，格式说明见：
									<a target="_blank" class="fa fa-question-circle" href="@routes.GenomeController.toMummerHelp()#interInfo" title="格式说明"></a>
									</td>
									<td><a href="javascript:downloadFile('snp.intergenic.info.xls')" style='cursor: pointer;'><span><em class='fa fa-download'></em></span></a></td>
									</tr>
									</tbody>
									</table>
									</div>
									<h5 class="myH5">3.2 InDel注释结果列表：</h5>
									<div class="table-responsive" id="tableContent">
									<table class="display fileTable table table-bordered" id="fileTable2" data-pagination="true"
									data-toolbar="#toolbar" data-page-list="[10, 25, 50, 100, all]"
									>
									<thead>
									<th data-sortable='true' >文件</th>
									<th data-sortable='true' >说明</th>
									<th data-sortable='true' >下载</th>
									</thead>
									<tbody>
									<tr>
									<td>indel.cdsindel.stat.xls
									</td>
									<td>样品的InDel发生在基因区的个数统计表，格式说明见：
									<a target="_blank" class="fa fa-question-circle" href="@routes.GenomeController.toMummerHelp()#indelCdsIndelStat" title="格式说明"></a>
									</td>
									<td><a href="javascript:downloadFile('indel.cdsindel.stat.xls')" style='cursor: pointer;'><span><em class='fa fa-download'></em></span></a></td>
									</tr>
									<tr>
									<td>indel.cds.stat.xls
									</td>
									<td>样品的 InDel 引起的基因突变类型统计表，格式说明见：
									<a target="_blank" class="fa fa-question-circle" href="@routes.GenomeController.toMummerHelp()#indelCdsStat" title="格式说明"></a>
									</td>
									<td><a href="javascript:downloadFile('indel.cds.stat.xls')" style='cursor: pointer;'><span><em class='fa fa-download'></em></span></a></td>
									</tr>
									<tr>
									<td>indel.chr.stat.xls
									</td>
									<td>参考序列上每条染色体的SNP 统计列表，格式说明见：
									<a target="_blank" class="fa fa-question-circle" href="@routes.GenomeController.toMummerHelp()#indelChrStat" title="格式说明"></a>
									</td>
									<td><a href="javascript:downloadFile('indel.chr.stat.xls')" style='cursor: pointer;'><span><em class='fa fa-download'></em></span></a></td>
									</tr>
									<tr>
									<td>indel.info.xls
									</td>
									<td>InDel 在功能区的详细注释列表，格式说明见：
									<a target="_blank" class="fa fa-question-circle" href="@routes.GenomeController.toMummerHelp()#indelInfo" title="格式说明"></a>
									</td>
									<td><a href="javascript:downloadFile('indel.info.xls')" style='cursor: pointer;'><span><em class='fa fa-download'></em></span></a></td>
									</tr>
									<tr>
									<td>indel.intergenic.info.xls
									</td>
									<td>InDel 在非功能区的注释列表，格式说明见：
									<a target="_blank" class="fa fa-question-circle" href="@routes.GenomeController.toMummerHelp()#indelInterInfo" title="格式说明"></a>
									</td>
									<td><a href="javascript:downloadFile('indel.intergenic.info.xls')" style='cursor: pointer;'><span><em class='fa fa-download'></em></span></a></td>
									</tr>
									<tr>
									<td>indel.len.dis.xls
									</td>
									<td>InDel 长度分布统计，格式说明见：
									<a target="_blank" class="fa fa-question-circle" href="@routes.GenomeController.toMummerHelp()#indelLenDis" title="格式说明"></a>
									</td>
									<td><a href="javascript:downloadFile('indel.len.dis.xls')" style='cursor: pointer;'><span><em class='fa fa-download'></em></span></a></td>
									</tr>
									</tbody>
									</table>
									</div>
									<h5 class="myH5">3.3 InDel 长度分布图：</h5>
									<div id="download">
									<input type="hidden" id="pdfBase64">
									下载SVG格式图片:
									<a href="javascript:downloadFile('indel.len.svg')" style='cursor: pointer;'><span><em class='fa fa-download'></em></span></a>
									</div>
									<div id="charts4">
									<div>
									<img src='' style='width: 80%' id="image5">
									</div>
									</div>
									<h5 class="myH5">3.4 SV注释结果列表：</h5>
									<div class="table-responsive" id="tableContent">
									<table class="display fileTable table table-bordered" id="fileTable2" data-pagination="true"
									data-toolbar="#toolbar" data-page-list="[10, 25, 50, 100, all]"
									>
									<thead>
									<th data-sortable='true' >文件</th>
									<th data-sortable='true' >说明</th>
									<th data-sortable='true' >下载</th>
									</thead>
									<tbody>
									<tr>
									<td>sv.anno.txt
									</td>
									<td>SV注释结果文件，格式说明见：
									<a target="_blank" class="fa fa-question-circle" href="@routes.GenomeController.toMummerHelp()#svAnno" title="格式说明"></a>
									</td>
									<td><a href="javascript:downloadFile('sv.anno.txt')" style='cursor: pointer;'><span><em class='fa fa-download'></em></span></a></td>
									</tr>
									</tbody>
									</table>
									</div>
									</div>
									<form style="display: none" action="@routes.GenomeController.downloadResultFile()" id="fileForm" method="post">
										<input name="fileName" id="fileName">
										<input name="missionId" id="missionId">
									</form>

							</div>
						</div>
					</div>
				</div>

			</div>

		</div>

		<script>
				var base641;
				var base642;
				var kind = "mummer"
				var missionId = ""

				function base642binaryArray(content) {
					var byteCharacters = atob(content);
					var byteArrays = [];
					var sliceSize = 512
					for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
						var slice = byteCharacters.slice(offset, offset + sliceSize);
						var byteNumbers = new Array(slice.length);
						for (var i = 0; i < slice.length; i++) {
							byteNumbers[i] = slice.charCodeAt(i);
						}
						var byteArray = new Uint8Array(byteNumbers);
						byteArrays.push(byteArray);
					}
					return byteArrays
				}

				function refreshContent(data) {
					var checkboxHtml = ""

					$.each(data.columnNames, function (i, v) {
						checkboxHtml += "<label style='margin-right: 15px'>" +
								"<input type='checkbox' checked='checked' value='" + v + "' onclick=\"setColumns('" + v + "')\">" + v +
								"</label>"
					})

					$("#checkbox").empty().append(checkboxHtml)
					var html = ""
					$.each(data.columnNames, function (i, v) {
						html += "<th data-field='" + v + "' data-sortable='true'>" + v + "</th>"
					})
					$("#tableContent").empty().append(coverHtml)
					$("#marker").after(html)
					$('#table').bootstrapTable({
						data: data.array,
						exportOptions: {
							csvSeparator: "\t",
							fileName: 'cover'
						},
						exportHiddenColumns: true
					});
					$.each(data.columnNames.slice(7), function (n, value) {
								$('#table').bootstrapTable('hideColumn', value);
								$("input:checkbox[value='" + value + "']").attr("checked", false)
							}
					);
				}

				function showResult(id, missionName) {
					$("#missionName").text(missionName)
					$("#missionId").val(id)
					showId = id
					var index = layer.load(1, {
						shade: [0.1, '#fff']
					});
					$.ajax({
						url: "@routes.GenomeController.mummerResult()?missionId=" + id,
						type: "get",
						dataType: "json",
						success: function (data) {
							layer.close(index)
							base641 = data.base641
							base642 = data.base642
							refreshContent(data.cover)
							// $("#charts").html("<img src='data:image/png;base64," + data.base641 + "' style='width:60%'>")
							$("#charts1").html("<img src='data:image/png;base64," + data.base642 + "' style='width:50%'>")
							$("#image1").attr("src", "@routes.GenomeController.getImage()?missionId=" + id + "&fileName=Target-Query.parallel.png")
							$("#image3").attr("src", "@routes.GenomeController.getImage()?missionId=" + id + "&fileName=final.snp_indel.dis.png")
							$("#image4").attr("src", "@routes.GenomeController.getImage()?missionId=" + id + "&fileName=SV_cycle.png")
							$("#image5").attr("src", "@routes.GenomeController.getImage()?missionId=" + id + "&fileName=indel.len.png")
							$("#result").show()
							var target_top = $("#missionResult").offset().top
							$("html,body").animate({scrollTop: target_top}, 800)
						}
					})
				}

				function refreshSvg(fileName, missionId, element) {
					$.ajax({
						url: "@routes.GenomeController.getFileContent()?missionId=" + missionId + "&fileName=" + fileName,
						type: "get",
						dataType: "json",
						success: function (data) {
							$("#" + element).html(data)
						}
					})
				}

				var coverHtml = ""

				Tool.fileInput

				$(function () {

					Mummer.init


					$('.fileTable').bootstrapTable({});

					var wsUri = "ws://" + window.location.host + "@routes.GenomeController.updateMissionSocket("mummer")"
					genome.testWebSocket(wsUri)

					coverHtml = $("#tableContent").html()
				})

				function downloadFile(fileName) {
					$("#fileName").val(fileName)
					$("#fileForm").submit()
				}

		</script>


	}
